<template>
  <basic-container v-loading="saveLoading">
    <div style="width:100%;min-height: 50px;padding-left:5px;display: inline-block;">
      <el-container>
        <el-container>
          <el-aside width="100px">
            <el-button type="primary" @click="handlePrint" style="float: left;">打印</el-button>
          </el-aside>
        </el-container>
      </el-container>
    </div>
    <template>
      <div id="printDetail">
          <div style="background:#fff;height: 50px;line-height: 50px;margin-bottom: 10px">
            <div class="pull-auto"  style="text-align: left;font-size: 16px;color:#3478f5;margin-right:10px">
              <div class="block">
                车间：{{workshopName}} <i class="el-breadcrumb__separator el-icon-arrow-right"></i>产线模型名称：{{realityLineName}}<i class="el-breadcrumb__separator el-icon-arrow-right"></i>产线模板： {{lineTplName}}<i class="el-breadcrumb__separator el-icon-arrow-right"></i>
                产线类型：{{lineType}}
              </div>
            </div>
          </div>
          <div class="form-designer">
            <el-container style="border: #e0e0e0 solid 1px;border-top:none">
              <el-main class="demo">
                <avue-flow :height="800"
                           width="100%"
                           ref="flow"
                           :option="option"
                           v-model="flowForm">
                  <template #header="{node}" >
                    <el-tooltip class="item" effect="dark" :content="`工位(`+(node || {}).name+`)`" placement="top-start">
                        <span style="width:145px;white-space: nowrap;overflow: hidden;display: inline-block;vertical-align: bottom;text-overflow: ellipsis;">
                            工位({{(node || {}).name}})
                        </span>
                    </el-tooltip>
                  </template>
                  <template slot-scope="{node}">
                    <el-collapse :ref="node.id+`Ref`"  v-model="showActive[node.id]" :style="{width:'100%',zIndex:zIndexStyle}"  @mouseover.native="handleMouseEnter(node.id)"  @mouseout.native="handleMouseLeave(node.id)">
                      <el-collapse-item title="工序信息" name="1">
                        <el-descriptions  class="margin-top"  style="width: 100%;" title="" :column="1" size="small" border >
                            <el-descriptions-item  label="工序" :labelStyle="{'width': '50px'}"
                              v-model="`process_`+node.id"
                              v-for="(item, index) in workPositionProcessItem[node.id]">
                                <span style="float: left;margin-top: 7px">{{item.processName}}</span>
                                <el-tooltip class="item" effect="dark" content="设备人员信息" placement="top-start">
                                  <el-button type="text"  @click="devicePersonInfo(node,item,index)" style="float: right;font-size: 16px"><i class="el-icon-tickets"></i></el-button>
                                </el-tooltip>
                            </el-descriptions-item>
                        </el-descriptions>
                      </el-collapse-item>
                     </el-collapse>
                  </template>
                </avue-flow>

              </el-main>
            </el-container>
          </div>
      </div>
    </template>

    <!--设备人员信息弹窗页面-->
    <el-dialog title=""
               :visible.sync="deviceDialogVisible"
               width="50%"
               height="600"
               lock-scroll
               v-dialogDrag
               append-to-body
               :close-on-click-modal="false"
               v-if="deviceDialogVisible"
               :fullscreen="deviceDialogFull">
      <el-backtop target=".el-card__body .el-dialog__wrapper .el-dialog" :right="15" :bottom="20" :visibility-height="1" />
      <el-backtop :bottom="60"></el-backtop>
      <template slot="title">
        <div class="avue-crud__dialog__header">
          <span class="el-dialog__title">
              <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
              设备人员信息
          </span>
          <div class="avue-crud__dialog__menu" style="cursor: pointer;margin-top: -2px;margin-right: 10px;" @click="deviceDialogFull? deviceDialogFull=false: deviceDialogFull=true">
              <i class="el-icon-full-screen"></i>
          </div>
        </div>
      </template>
      <!--工序菜单-->
      <div style="height:10vh;width: 90%;margin-left: auto;margin-right: auto">
        <div style="width: 100%;">
          <el-steps  status="process">
              <el-step :title="workPositionName">
                <template slot="icon">
                  工位
                </template>
              </el-step>
              <el-step :title="processInfo.workshopSection">
                <template slot="icon">
                  工段
                </template>
              </el-step>
              <el-step :title="processInfo.processName">
                <template slot="icon">
                  工序
                </template>
              </el-step>
          </el-steps>
        </div>
      </div>
      <div class="el-dialog-height" style="height: 40vh">
            <el-table :data="infoList"   border style="width: 100%;height:40vh;float: left;display: inline-block">
              <el-table-column show-overflow-tooltip prop="deviceName" align="center" label="设备"> </el-table-column>
              <el-table-column show-overflow-tooltip prop="toolName" align="center" label="工具"></el-table-column>
              <el-table-column show-overflow-tooltip prop="clampName" align="center" label="夹具"></el-table-column>
              <el-table-column show-overflow-tooltip prop="personName" align="center" label="员工"></el-table-column>
            </el-table>
      </div>
    </el-dialog>
  </basic-container>
</template>

<script>
    import { getObj} from '@/api/pfoc/factorysettings' //获取当前工厂信息
    import { getDevice,getDeviceClassList} from '@/api/hengdong/pfocinterface'//获取设备相关
    import { getLineModelingInfo } from '@/api/pfoc/realityproducelinemodeling' //产线建模修改与获取产线建模信息
    import { getPersonCredentialList } from '@/api/workorder/personcredentialmanage' //获取所有人员数据

    /**引入设备下拉框*/
    import deviceSelect from '@/views/pfoc/realityproductline/custom-select'

    export default {
        name: "view-line-modeling",
        components: {
            //设备下拉框
            deviceSelect,
        },
        props:{
            lineId:{//产线ID
                type:String
            },
        },
        data() {
            return {
                 formCollapse: [],
                count: 0,
                nodeCount:0,//节点下标
                form: [],//提交时数据集合
                flowForm:'',
                option: {
                    name: null,
                    nodeList: [],//工位节点集合
                    lineList: [],//工位各节点指向顺序集合
                },
                processInfo:{//工位信息
                    workshopSection:null,//工段
                    processName:null,//工位名称
                    processId:null,//工位ID
                },
                info:{
                    deviceSn:null,//设备SN
                    toolSn:null,//工具SN
                    clampSn:null,//夹具SN
                    personName:null,//员工
                    deviceName:null,//设备SN
                    toolName:null,//工具SN
                    clampName:null,//夹具SN
                },
                index:null,//用于标记打开的是第几个
                infoList:[],//存储设备人员信息
                workPositionProcessItem: {},//存储工位对应工位的二位数组
                personCredentialList:[],//人员资质数据集
                showActive:[],//属性展示model集合
                logList:[],//操作日志集合
                realityLineName:null,//产线名称
                deviceList:[],//设备集合
                clampList:[],//夹具集合
                toolList:[],//工具集合
                deviceClassList:[],//设备分类集合
                organizationId:null,//组织ID
                organizationName:null,//组织名称
                saveLoading:false,//保存时遮罩开关
                lineModelingDetailsDelIds:[],//存储需要删除的节点工位ID（即已有工位删除ID）
                zIndexStyle:"",
                mainData:{},//真实产线主数据
                subData:[],//真实产线详情数据
                lineTplId:null,//产线模板ID
                lineTplName:null,//产线模板名称
                workshopList:[],//车间数据集合
                workshopId:null,//车间ID
                workshopName:null,//车间名称
                lineType:null,//产线类型（手动线、自动线）
                deviceDialogVisible:false,//设备添加弹窗开关
                deviceDialogFull:false,//设备添加弹窗放大缩小
                workPositionName:null,//工位名称(用于工位添加)
                workPositionId:null,//工位ID(用于工位添加)
                nodeId:null,//工位节点ID(用于工位添加)
                lineTypeList:[//产线类型列表
                  {
                    value: '手动线',
                    label: '手动线'
                  }, {
                    value: '自动线',
                    label: '自动线'
                  }
                ]
            };
        },

        created() {
            //获取当前工厂信息
            this.getFactoryInfo();
            //获取所有人员数据
            this.getPersonCredentialListData();
        },
        computed: {
            nodeList () {
                return this.option.nodeList
            }

        },
        mounted() {
            this.nodeCount = this.option.nodeList.length;//初始化节点下标
        },
        methods: {
            getLineModelingInfos(){
                this.formCollapse = []
                if(!this.validatenull(this.lineId)) {
                    this.saveLoading = true
                    getLineModelingInfo(this.lineId).then(response => {
                        this.$refs.flow.resetPlumb();
                        var data =response.data.data;
                        //主表数据
                        this.mainData= data.realityProduceLineModeling;//主数据
                        //子表数据
                        this.subData = data.realityProduceLineModelingDetailsList;//子表数据
                        //产线名模型称
                        this.realityLineName =this.mainData.realityLineName;
                        //产线模板ID
                        this.lineTplId =this.mainData.lineTplId;
                        //产线模板名称
                        this.lineTplName = this.mainData.lineTplName;
                        //车间ID
                        this.workshopId = this.mainData.workshopId;
                        //车间名称
                        this.workshopName = this.mainData.workshopName;
                        //产线类型
                        this.lineType = this.mainData.lineType;
                        //设置反显工序
                        this.option.nodeList = JSON.parse(this.mainData.processNodes);
                        //设置反显工序指向顺序
                        this.option.lineList =  JSON.parse(this.mainData.processNodeLine);
                        //初始化节点下标
                        var n =  this.option.nodeList[ this.option.nodeList.length-1].id;
                        this.nodeCount = parseInt(n.split("node")[1])+1;

                         //从子表数据中根据nodeId字段将对应的workPositionProcessItem填入到页面的workPositionProcessItem二位数组中
                        for(var i=0;i<this.subData.length;i++){
                            var nodeId = this.subData[i].nodeId;
                            var item =JSON.parse(this.subData[i].workPositionProcessItem);
                            this.$set(this.workPositionProcessItem,nodeId, item);//添加工位集合
                        }
                        //重新初始化flow组件
                        this.$refs.flow.init();
                        this.$refs.flow.cleanupDarg();
                        this.saveLoading = false
                    }).catch(() => {
                        this.saveLoading = false
                    })
                }
            },
            /**获取工厂信息*/
            getFactoryInfo() {
                const factoryId=1;
                getObj(factoryId).then(response => {
                    this.organizationId = response.data.data.menuId;//组织ID
                    this.organizationName = response.data.data.organizationName;//组织名称
                    //获取工厂设备集合
                    this.getFactoryDeviceList();
                })
            },
            /**获取工厂设备集合*/
            getFactoryDeviceList(){
                this.saveLoading = true
                var obj={
                    position:this.organizationName,//设置组织查询条件
                }
                getDevice(obj).then(response => {
                    this.deviceList = response.data.data;//设备集合
                    for(var i =0; i<this.deviceList.length;i++){
                        if(this.deviceList[i].deviceClass==20){//组织下工具夹具筛选
                            this.clampList.push(this.deviceList[i]);//夹具集合
                            this.toolList.push(this.deviceList[i]);//工具集合
                        }
                    }
                    this.saveLoading = false
                })
            },
           //获取所有人员数据
            getPersonCredentialListData(){
                getPersonCredentialList().then(response => {
                    this.personCredentialList = response.data.data;
                })
            },
            //设备人员信息
            devicePersonInfo(node,processInfo,index){
                this.workPositionName=node.name;//工位名称(用于工序添加)
                this.workPositionId=node.mark;//工位ID(用于工序添加)
                this.nodeId=node.id;//工位节点ID(用于工序添加)
                this.processInfo.processName = processInfo.processName;//工序名称
                this.processInfo.processId = processInfo.id;//工序ID
                this.processInfo.workshopSection = processInfo.workshopSection;//工位所属工段
                this.index = index;
                this.infoList = this.workPositionProcessItem[node.id][index].info;
                this.deviceDialogVisible=true;
            },
            //打印
            handlePrint () {
                this.$Print('#printDetail');
            },
            //鼠标移到置顶
            handleMouseEnter(nodeId) {
                //属性鼠标移到展开
                // this.$set(this.showActive, nodeId, ['1']);
                let ref = nodeId+"Ref";//获取到当前的ref
                this.$refs[ref].$parent.$refs.node.style.zIndex="999999";
                this.zIndexStyle="1";

            },
            //鼠标移开取消置顶
            handleMouseLeave(nodeId) {
                //属性鼠标移开关闭
                // this.$set(this.showActive, nodeId, []);
                let ref = nodeId+"Ref";//获取到当前的ref
                this.$refs[ref].$parent.$refs.node.style.zIndex="2";
                this.zIndexStyle="";

            },
        }
    };
</script>

<style scoped>
  /deep/.avue-flow__node{
    height: auto!important;
  }
  /deep/ .avue-flow__node-header {
    line-height: 30px;
  }
  /deep/.el-descriptions__title {
    font-size: 14px;
    font-weight: 400;
    margin-top: 5px;
  }



  /deep/ .el-dialog-height {
      height: 30vh;
      width: 90%;
      margin-top: 10px;
      overflow: auto;
      /* 隐藏默认的滚动条样式 */
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE and Edge */
      text-align: center;
      margin-left: auto;
      margin-right: auto;
  }


  /deep/ .el-step__icon.is-text{
    color: #000;
    font-size: 12px;
    padding: 10px;
    border-color: #000;
    width: 50px;
    height: 50px;
  }
  /deep/.el-step__icon{
    width: 40px;
    height: 40px;
  }
  /deep/.el-step.is-horizontal .el-step__line{
    top:20px!important;
    border-color: #000;
  }
  /deep/.el-step.is-vertical .el-step__line {
    left: 23px!important;
  }
  /deep/.el-step.is-vertical .el-step__main{
    padding-left: 36px;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding-top: 11px;
    color: #000;
    font-size: 12px;
  }
  /deep/.el-step.is-vertical .el-step__title{
     color: #000;
    font-size: 13px;
  }
  /deep/.el-step__line {
    position: absolute;
    border-color: inherit;
    background-color: #242526;
  }
  /deep/.el-step__title.is-wait {
    color: #040404;
  }
/deep/.el-table thead {
    color: #040404!important;
}

  /*以下样式是打印的时候avue表格错乱修正方式（主要是序号列和操作列固定影响的）*/
  /deep/.el-table__fixed{
    display: none!important;
  }
  /deep/.el-table__fixed-right{
    display: none!important;
  }
  /deep/.el-table__cell.is-hidden>*{visibility:visible !important;}

  /deep/ .avue-grid{
    display: none!important;
  }
  /deep/.el-main{
    background:#fff !important;
  }
  /deep/.el-card__body{
    padding: 0px!important;
  }
  /*去掉滚动条样式*/
  .demo::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  .demo {
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    overflow-x: hidden;
    overflow-y: auto;
  }
</style>
